 <%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="renderer" content="webkit">
		<meta name="applicable-device" content="pc,mobile">
    <title>用户登录</title>
    <!-- 使用load标签加载资源文件 -->
    <link rel="stylesheet" type="text/css" href="./assets/css/bootstrap.min.css">
    <script type="text/javascript" src="./assets/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="./assets/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 创建栅格布局 -->
<div class="container">
   <jsp:include page="header1.jsp"></jsp:include>


    <!-- 主体 -->
    <div class="row">
        <!-- 左侧8列 -->
        <div class="col-md-8">
            <!-- 页头 -->
            <div class="page-header">
                <h2>用户登录</h2>
            </div>
            <!-- 注册表单:采用水平表单 -->
            <form  action="${pageContext.request.contextPath}/user/login.do" class="form-horizontal" method="post" id="login">


                <div class="form-group">
                    <label for="inputEmail2" class="col-sm-2 control-label">账号:</label>
                    <div class="col-sm-10">
                        <input type="text" name="usercode" class="form-control" id="inputEmail2" placeholder="Email">
                    </div>
                </div>


                <div class="form-group">
                    <label for="inputPassword4" class="col-sm-2 control-label">密码:</label>
                    <div class="col-sm-10">
                        <input type="password" name="passwords" class="form-control" id="inputPassword4" placeholder="Password">
                    </div>
                </div>


                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-primary" id="submit">登录</button>
                    </div>
                </div>
            </form>
            <!-- ajax提交当前表单 -->
            <script type="text/javascript">
                $(function () {
                    $('#submit').on('click', function () {
                        //用ajax提交用户信息
                        $.ajax({
                            type: 'post',
                            url: "/index.php/index/user/logincheck.html",
                            data: $('#login').serialize(),
                            dataType: 'json',
                            success: function (data) {
                                switch (data.status) {
                                    case 1:  //登录成功跳到首页
                                        alert(data.message);
                                        window.location.href = "/index.php/index/index/index.html";
                                        break;
                                    case 0:  //失败或验证不通过返回登录页
                                    case -1:
                                        alert(data.message);
                                        window.location.back();
                                        break;
                                }

                            }
                        })
                    })
                })
            </script>


            <!-- 右侧4列 -->
        </div>
        <div class="col-md-4">
            <div class="page-header"><h2>热门浏览</h2></div>
            <!-- 列表使用:列表组来做 -->
            <div class="list-group">
                <a href="detail.html" class="list-group-item">自己动手写框架教程<span class="badge">4</span></a>
                <a href="detail.html" class="list-group-item">自己动手写框架教程<span class="badge">4</span></a>
                <a href="detail.html" class="list-group-item">自己动手写框架教程<span class="badge">4</span></a>
                <a href="detail.html" class="list-group-item">自己动手写框架教程<span class="badge">4</span></a>
                <a href="detail.html" class="list-group-item">自己动手写框架教程<span class="badge">4</span></a>
                <a href="detail.html" class="list-group-item">自己动手写框架教程<span class="badge">4</span></a>
                <a href="detail.html" class="list-group-item">自己动手写框架教程<span class="badge">4</span></a>
                <a href="detail.html" class="list-group-item">自己动手写框架教程<span class="badge">4</span></a>
                <a href="detail.html" class="list-group-item">自己动手写框架教程<span class="badge">4</span></a>
                <a href="detail.html" class="list-group-item">自己动手写框架教程<span class="badge">4</span></a>
                <a href="detail.html" class="list-group-item">自己动手写框架教程<span class="badge">4</span></a>
                <a href="detail.html" class="list-group-item">自己动手写框架教程<span class="badge">4</span></a>
            </div>
        </div>
        <!-- 底部开始 -->
    </div>
</div>
<!-- 底部结束 -->
</body>
</html>